[S03E02] Jasmine & Protractor 簡介
https://www.youtube.com/watch?v=7PvkoPzOBks&list=PL9LUW6O9WZqgUMHwDsKQf3prtqVvjGZ6S&index=42

本週有jiaming大大講解，一開始導讀自己撰寫的文章「前端測試框架-Jasmine&Protractor介紹」
請同學們直接參考大大的文章，因為寫太完整了，也不需要補充
小弟只針對實作的部分，有特別講解的做筆記

• 前端測試框架-Jasmine&Protractor介紹
  https://jiaming0708.github.io/2017/10/17/jasmine-protractor/

jasmine語法請參考

https://jasmine.github.io/

# 安裝jasmine
npm install --save-dev jasmine
# 初使化jasmine
./node_modules/.bin/jasmine init
# 會多出spec/support/jasmine.json

# 在spec/目錄底下，手動新增檔案first.spec.js
describe('first test', () => {
                       ^^^^^arrow function 等於function(){} 
    it('hello jasmine', () => {
        expect(true).toBe(true); // 預期true會為true
        expect(false).not.toBe(true); // 預期false不會為true
        except(11).toEqual(11);
        except(2.78).toBeLessThan(3.14); // 預期2.78小於3.14
        except(2.78).not.toBeGreaterThan(3.14); // 預期2.78不大於3.14
        
        var foo = function(){
            throw new typeError("throwError");
        };
        
        expect(foo).toThrowError(TypeError); // 預期foo()會拋出TypeError
               ^^^丟出一個Error
    });
});

# 在package.json修改scripts/test，就能用npm test測試
# jasmine會自己找spec裡的測試案例
"scripts": {
  "test": "jasmine"
}

Global

https://jasmine.github.io/api/3.4/global

Global有很多項目

• afterAll 在 Day13_Testing Leo大大有提過
• afterEach 在 Day13_Testing Leo大大有提過
• beforeAll 在 Day13_Testing Leo大大有提過
• beforeEach 在 Day13_Testing Leo大大有提過
• describe
• expect
• expectAsync
• fail
• fdescribe
• fit
• it
• pending
• spyOn
• spyOnAllFunctions
• spyOnProperty
• xdescribe
• xit

x不要跑 跟 f聚焦

xit('xxx',()=>{...});
^^ 不跑

fit('xxx',()=>{...});
^^ 只跑這個

如果外面有x，巢狀裡面有f，則會跑f
xdescribe('xxx',()=>{
fit('yyy',()=>{...});
^^^會跑
}

Spies

jasmine 叫 spyOn()
其他測試框假可能叫 mock

spyOn可以抽換Object裡的function、真實的Web API，換成mock的、fake的
也可以設定return value
控制測試情境

整段程式碼都在jiaming大大的文章裡，所以就讓我偷懶一下囉
https://jasmine.github.io/api/3.4/global.html#spyOn

Protractor

http://www.protractortest.org/#/

一樣，請參考jiaming大大的文章即可

angular推出的end-to-end(e2e)的測試框架
內建angular專案就會有protractor.conf.js

單元測試，會跟component有關
e2e測試，不會跟component有關

// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts' // 測試專案放在./e2e/
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine', // 還支援Mocha、Cucumber、Serenity/JS
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  onPrepare() {
    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  }
};

安裝protractor

npm install -g protractor # 裝完就能下指令: protractor conf.js
webdriver-manager update
webdriver-manager start # 啟用webdriver，例如:chrome
#http://localhost:4444/wd/hub # 看實際聽哪個port

conf.js

exports.config = {
  framework: 'jasmine',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js']//測試規格檔
}

spec.ts

describe('Protractor Demo App', function() {
  it('should have a title', function() {
    browser.get('http://juliemr.github.io/protractor-demo/');
    ^^^^^^ 多了可以操作browser，重點用selector找到要的element，進行操作
    // browser有哪些好用的
    // http://www.protractortest.org/#/api
    
    expect(browser.getTitle()).toEqual('Super Calculator');
                    ^^^^^^ browser上面的title
    
    let first = element(by.css('.input-small'));
                        ^^^^^^^^^^^^^^^^^^^^^ selector
    first.sendKeys('2');
          ^^^^^^^^ input value
    expect(first.getAttribute('value')).toEqual('2');
    
    browser.sleep(10000); // 暫停看一下畫面
    
    let elsArray = element.all(by.css('.input-small'));
                           ^^^ 撈多個element
    let first1 = elsArray.get(0); // 或 elsArray.first();
                                  // 或 elsArray.last(); 取最後一筆
    element(by.id('gobutton')).click();
            ^^^^^用id找出element，做click動作
    string txt = $('h2').getText();
                 ^^^^^^^ 也可以用jQuery的寫法
  });
});

如果browser的method回傳的是promise，就能用await、async
例如:element.click()

!webdriver.promise.Promise.<void>	
A promise that will be resolved when the click command has completed.

就可以element.click().then()...

page object

可以把selector的動作，寫在app.po.ts裡的function
在app.e2e-spec.ts就可以重複使用
以後css有變，也只要調app.po.ts裡的function即可

e2e/app.po.ts

import { browser, by, element } from 'protractor';
export class AppPage {
  navigateTo() {
    return browser.get('/');
  }

  getMainHeading() {
    return element(by.css('app-root h1')).getText();
  }
}